<template>
  <div class="vacate">
    <el-dialog title="请假" :visible.sync="visible">
      <el-form :model="form">
        <el-form-item label="请假人：" :label-width="formLabelWidth">
          李白
        </el-form-item>
        <el-form-item label="请假时间：" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker v-model="form.date" type="date" placeholder="选择请假时间" :picker-options="pickerOptions" @change="handleDate">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="当天课程：" :label-width="formLabelWidth" class="course-box" v-if="isChecked">
          <div class="course" v-if="isCourse">
            <el-checkbox-group v-model="checkList" @change="handleCheckedList">
              <el-checkbox v-for="(item, index) in courseList" :key="index" :label="item.courseName" class="check-box">
                {{item.courseName}}
                <div class="info-box" v-if="isRadio">
                  <el-radio-group v-model="radio[index]" @change="handleRadio">
                    <el-radio :label="1" class="radio-box">
                      代课教练：
                      <el-select v-model="value" placeholder="请选择" size="small">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-radio>
                    <el-radio :label="2" class="radio-box">
                      改期上课：
                      <el-select v-model="value" placeholder="请选择" size="small">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </el-radio>
                  </el-radio-group>
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div v-else>
            无
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleVisible">取 消</el-button>
        <el-button type="primary" @click="handleVisible">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      checkList: [],
      radio: [0, 1, 2, 3, 4],
      isChecked: '', // 显示是否当天课程
      isCourse: '', // 显示是否有课程
      isRadio: false,
      courseList: [ // 课程列表
        {
          id: 1,
          courseName: '少儿培训'
        },
        {
          id: 2,
          courseName: '青年培训'
        },
        {
          id: 3,
          courseName: '成年人培训'
        }
      ],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        }
      ],
      value: '',
      form: {
        date: '',
        startTime: '',
        endTime: ''
      },
      formLabelWidth: '120px',
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  methods: {
    handleVisible () {
      this.$emit('visible', false)
    },
    handleCheckedList (value) {
      console.log('handleCheckedList1', value)
      if (value.length > 0) {
        this.courseList.forEach((item, index) => {
          console.log('handleCheckedList2', item, index)
          console.log(item.courseName)
          this.checkList.forEach(i => {
            if (item.courseName === i) {
              this.isRadio = true
            }
          })
        })
      } else {
        this.isRadio = false
      }
    },
    handleDate (date) {
      console.log(date)
      if (typeof (date) === 'undefined') {
        this.isCourse = false
        this.isChecked = false
      } else {
        this.isCourse = true
        this.isChecked = true
      }
    },
    handleRadio (value) {
      console.log(value)
    }
  }
}
</script>

<style lang="scss" scoped>
  .vacate {
    .check-box {
      display: block;
    }
    // .course-box {
    //   position: relative;
    //   .info-box {
    //     position: absolute;
    //     top: 0px;
    //     left: 0px
    //   }
    // }
    .radio-box {
      display: block;
      margin-top: 10px;
    }
  }
</style>
